import React, { useState, useEffect, useRef } from "react";
import { RendererPropTypes } from "@/visualizations/prop-types";
import { replaceUrlParameter } from "@/lib/DateRangeParameter";

import videozhCN from 'video.js/dist/lang/zh-CN.json';
import 'video.js/dist/video-js.css';

export default function Renderer({ data, options, refreshStartedAt }) {
  const [refreshAt, setRefreshAt] = useState(refreshStartedAt);
  const playerRef = useRef(null);
  const videoid=Math.random();

  useEffect(() => {
    if (!!!refreshAt && !!refreshStartedAt) {
      setRefreshAt(refreshStartedAt);
    } else if (!!refreshAt && !!refreshStartedAt) {
      if (refreshAt.isBefore(refreshStartedAt)) {
        setRefreshAt(refreshStartedAt);
      }
    }
  }, [refreshStartedAt]);
  
  useEffect(() => {
    const url = replaceUrlParameter(options.url, data);
    const auto_controls = options.auto_controls;
    const auto_play = options.auto_play;
    const auto_loop = options.auto_loop;
    const auto_preload = options.auto_preload;
    const auto_muted = options.auto_muted;
    const poster = options.poster_url;
    const videoOptions = {
      controls: auto_controls,
      autoplay: auto_play ? "any" : false,
      loop: auto_loop,
      preload: auto_preload ? "auto": "none", 
      muted: auto_muted,
      language: 'zh-CN',
      poster: poster,
    }
 console.log('data', data )
 console.log('options', options )
 console.log('refreshStartedAt ', refreshAt )
    if (!!url) {
      require.ensure([], function(require) {
        if(url.includes("webrtc")){
          try{
            const player = new window.ZLMRTCClient.Endpoint(
              {
                  element: document.getElementById('custom-videoviz'+videoid),// video 标签
                  debug: true,// 是否打印日志
                  zlmsdpUrl: url,//流地址
                  simulcast:true,
                  useCamera:true,
                  audioEnable:true,
                  videoEnable:true,
                  recvOnly:true,
                  autoplay:true,
                  resolution:{w:'100%',h:'100%'}
              });
          }catch(e){
            setTimeout(() => {
              const player = new window.ZLMRTCClient.Endpoint(
              {
                  element: document.getElementById('custom-videoviz'+videoid),// video 标签
                  debug: true,// 是否打印日志
                  zlmsdpUrl: url,//流地址
                  simulcast:true,
                  useCamera:true,
                  audioEnable:true,
                  videoEnable:true,
                  recvOnly:true,
                  autoplay:true,
                  resolution:{w:'100%',h:'100%'}
              });}, 6000 )
            }
         }else{
        import(/* webpackChunkName:"videojs" */ 'video.js').then(({default: videojs}) => {  
          videojs.addLanguage('zh-CN', videozhCN);
          const player = videojs(playerRef.current, videoOptions, () => {
            player.src({
              src: url,
              type: /\.m3u8$/.test(url) ? 'application/x-mpegURL' : '',
            });
          });

          return () => {
            player.dispose();
          };  
        });
      }
      }, 'videojs');
    }
  }, [refreshAt, options]);

  return (
    <video ref={playerRef} 
    id={'custom-videoviz'+videoid}
    controls 
    autoplay={options.auto_play}
      className="video-js vjs-default-skin vjs-big-play-centered"
      style={{margin:"2px 2px 0px 2px", width: "calc(100% - 4px)",height: "calc(100% - 2px)"}}
    />
  );
}

Renderer.propTypes = RendererPropTypes;
